<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>新增食材</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../../styles/common.css" />

    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>

<body>

<div class="app" id="app">
    <!--    <el-container style="height: 750px; ">-->
    <!--    有一条细细的白线-->

    <!--1.主要内容-->
    <el-container style="height: 750px; border: 1px solid #eee">
        <el-container>
            <div style="width: 100%;margin: 20px 0 0 300px">
                <el-form :model="formData_foodstuff" :rules="rules" ref="formData_foodstuff" label-width="100px" class="demo-formData_foodstuff">
                    <el-form-item  label="食材名称：" style="width:400px;" prop="name">
                        <el-input v-model="formData_foodstuff.name"></el-input>
                    </el-form-item>

                    <el-form-item  label="图片：" prop="image">
                        <el-upload class="avatar-uploader"
                                   action="/photos/upload"
                                   :show-file-list="false"
                                   :on-success="handleAvatarSuccess"
                                   :before-upload="beforeUpload"
                                   ref="upload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

                    <el-form-item  label="类型" style="width:400px;" prop="type">
                        <el-input v-model="formData_foodstuff.type"></el-input>
                    </el-form-item>

                    <el-form-item  label="数量" style="width:400px;" prop="number">
                        <el-input-number v-model="formData_foodstuff.number" :min="0" :max="100" label="数量"></el-input-number>
                    </el-form-item>


                   <div style="margin-left:100px; ">
                       <el-button type="primary" @click="submitForm">添加</el-button>
                       <el-button @click="resetForm('formData_foodstuff')">全部重置</el-button>
                   </div>
                    </el-form-item>
                </el-form>

            </div>

        </el-container>
    </el-container>

</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../../plugins/axios/axios.min.js"></script>


<script>
    new Vue({
        el: '#app',
        data:{
            //弹框表单（编辑增加）
            formData_foodstuff: {},


            //弹框表单（input）校验
            rules: {
                name: [
                    { required: true, message: '请输入食材名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请输入类型', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                number: [
                    { required: true, message: '请输入数量', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],

            },
            //图片
            imageUrl:'',   //弹框图片上传下载
        },

        methods: {

            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            //2.提交 新增/修改表单
            submitForm() {
                this.$refs.formData_foodstuff.validate((valid)=>{
                    if (valid){


                        axios.post("/foodstuffs/add",this.formData_foodstuff).then((res)=>{
                            this.$message.success("添加完成")
                        }).finally(()=>{
                            this.getAll();
                            this.formData_foodstuff={};
                        })


                    }
                })
            },

            //4.图片文件上传
            handleAvatarSuccess (response, file, fileList) {
                console.log("response:")
                console.log(response)
                this.formData_foodstuff.image=response.data
                // this.foodstuffAddShow.avatar=<res className="data"></res>;

                this.imageUrl = `/photos/download?name=${response.data}`
            },
            beforeUpload (file) {
                if(file){
                    const suffix = file.name.split('.')[1]
                    const size = file.size / 1024 / 1024 < 2
                    if(['png','jpeg','jpg'].indexOf(suffix) < 0){
                        this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                        this.$refs.upload.clearFiles()
                        return false
                    }
                    if(!size){
                        this.$message.error('上传文件大小不能超过 2MB!')
                        return false
                    }
                    return file
                }
            },
            getImage (image) {
                this.imageUrl1= `/photos/download?name=${image}`
            },

        }
    })
</script>
</body>
</html>
